<template>
    <div>
        <el-dialog
            :modelValue="visible"
            width="30%"
            class="custom-modal"
            @close="handleClose"

        >
            <template #header>完善信息，为您提供专属服务</template>
            <div>
                <el-form
                    ref="myForm" 
                    :model="form" 
                    :rules="rules"
                    class="myForm" 
                    label-position="top"
                >
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop='name' label='姓名'>
                                <el-input v-model="form.name" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="phone" label="手机">
                                <el-input v-model="form.phone"  />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop='demandType' label='您的需求'>
                                <el-select v-model="form.demandType" placeholder="">
                                    <el-option
                                        v-for="item in ( optionMaps.demandList || [] ) "
                                        :label="item"
                                        :key="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
            </div>
            <template #footer>
                <el-button size="large" style="width:100%;" color="#4065fb" @click="handleSubmit">确认提交</el-button>
            </template>
        </el-dialog>
        <el-dialog
            v-model="confirmVisible"
            width="440px"
            @close="confirmVisible = false "
        >
            <div style="text-align:center;">
                <div>
                    <el-icon style="font-size:64px; color:#38c793">
						<CircleCheckFilled />
					</el-icon>
                </div>
                <div style="font-size:14px; color:rgba(0, 0, 0, 0.65); line-height:36px; margin:16px 0; ">产品技术人员会在24小时内联系您</div>
                <el-button size="large" style="width:100%;" color="#4065fb" @click="handleConfirm">确认</el-button>

            </div>
        </el-dialog>
    </div>
</template>

<script setup>  
    import { getOptional, applyDemand, markAction } from '@/api/global.js';
    import { watch, ref, reactive, onMounted } from 'vue';
    import { ElMessage } from 'element-plus';
    import { CircleCheckFilled } from '@element-plus/icons-vue';
    const myForm = ref(null);
    const confirmVisible = ref(false);
    const optionMaps = ref({});
    const props = defineProps({
        visible:Boolean
    });
    const emit = defineEmits(['onClose']);
   
    const form = reactive({
        name:'',
        phone:'',
        demandType:''
    });
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        return new Error("请输入电话号码");
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        const isPhone = reg.test(value);
        value = Number(value); //转换为数字
        if (typeof value === "number" && !isNaN(value)) {//判断是否为数字
          value = value.toString(); //转换成字符串
          if (value.length < 0 || value.length > 12 || !isPhone) { //判断是否为11位手机号
            callback(new Error("手机号码格式如:138xxxx8754"));
          } else {
            callback();
          }
        } else {
          callback(new Error("请输入电话号码"));
        }
      }
    };

    const rules = reactive({
        name:[{ required:true, message:'姓名不能为空', trigger:'blur' }],
        phone:[{ required:true, message:'手机不能为空', trigger:'blur' }, { validator: checkPhone, message: '请输入正确的手机号', trigger: "blur"}],
        demandType:[{ required:true, message:'需求不能为空', trigger:'blur' }],
    })

    const handleSubmit = ()=>{
        if ( myForm.value ) {
            myForm.value.validate(valid=>{       
                if ( valid ){  
                    applyDemand({ ...form })
                    .then(res=>{
                        if ( res.data.code === 200 ) {
                            confirmVisible.value = true;
                            markAction({ operationType:'点击提交表单' });
                        } else {
                            ElMessage.error(res.data.message);
                        }
                    }) 
                                              
                }
            })
        }
    }
    const handleClose = ()=>{
        emit('onClose');
        if ( myForm.value ) {
            myForm.value.resetFields();
        }
    }
    const handleConfirm = ()=>{
        confirmVisible.value = false;
        emit('onClose');
    }
    const fetchOptional = ()=>{
        getOptional()
        .then(res=>{
            if ( res.data.code === 200 ) {
                optionMaps.value = res.data.data;
            }
        })
    }
    onMounted(()=>{
        fetchOptional();
    })
</script>
<style>
    .custom-modal {
        width:440px;
        padding:32px;
    }
    .custom-modal .el-dialog__header {
        font-size:20px;
        font-weight:bold;
        text-align:center;
        padding-right:0;
        /* padding:16px; */
    }
</style>